<div class="row">
	<div class="col-xs-12">
		<div class="box">
			<div class="box-header">
				<h3 class="box-title">日志管理</h3>
				<div class="box-tools">
					<div class="input-group input-group-sm" style="width: 350px;">
						<input type="text" name="table_search" id="searchNameId"
							class="form-control pull-right" placeholder="用户名">

						<div class="input-group-btn">
							<button type="button" class="btn btn-default btn-search">
								<i class="fa fa-search"></i>
							</button>
							<button type="button" class="btn btn-default btn-delete">删除</button>
						</div>
					</div>
				</div>
			</div>
			<!-- /.box-header -->
			<div class="box-body table-responsive no-padding">
				<table class="table table-hover">
					<thead>
						<tr>
							<th><input type="checkbox" id="checkAll">全选</th>
							<th>用户名</th>
							<th>操作</th>
							<th>请求方法</th>
							<th>请求参数</th>
							<th>IP</th>
							<th>执行时长</th>
						</tr>
					</thead>
					<tbody id="tbodyId">
						<tr>
							<td colspan="7">数据正在加载中...</td>
						</tr>
					</tbody>
				</table>
			</div>
			<div id="pageId" class="box-footer clearfix" dm="100"></div>
			<!-- /.box-body -->
		</div>
		<!-- /.box -->
	</div>
</div>
<script type="text/javascript">
	$(function() {
		//为什么要将doGetObjects函数写到load函数对应的回调内部。
		$("#pageId").load("doPageUI", function() {
			doGetObjects();
		});
	});
	function doGetObjects() {
		//debugger;//断点调试
		//1.定义url和参数
		var url = "log/doFindPageObjects"
		var pageCurrent = $("#pageId").data("pageCurrent");
		//为什么要执行如下语句的判定，然后初始化pageCurrent的值为1
		//pageCurrent参数在没有赋值的情况下，默认初始值应该为1.
		if (!pageCurrent)
			pageCurrent = 1;
		var params = {
			"pageCurrent" : pageCurrent
		};//pageCurrent=2
		//2.发起异步请求
		//请问如下ajax请求的回调函数参数名可以是任意吗？//可以,必须符合标识符的规范
		$.getJSON(url, params, function(result) {
			//请问result是一个字符串还是json格式的js对象？对象
			doHandleQueryResponseResult(result);
		});//特殊的ajax函数
	}
	function doHandleQueryResponseResult(result) { //JsonResult
		if (result.state == 1) {//ok
			//更新table中tbody内部的数据
			doSetTableBodyRows(result.data.records);//将数据呈现在页面上
			//更新页面page.html分页数据
			doSetPagination(result.data); //此方法写到page.html中
		} else {
			alert(result.message);
		}
	}
	function doSetTableBodyRows(records) {
		//1.获取tbody对象，并清空对象
		var tBody = $("#tbodyId");
		tBody.empty();
		//2.迭代records记录，并将其内容追加到tbody
		for ( var i in records) {
			//2.1 构建tr对象
			var tr = $("<tr></tr>");
			//2.2 构建tds对象
			var tds = doCreateTds(records[i]);
			//2.3 将tds追加到tr中
			tr.append(tds);
			//2.4 将tr追加到tbody中
			tBody.append(tr);
		}
	}
	function doCreateTds(data) {
		var tds = "<td><input type='checkbox' class='cBox' name='cItem' value='"+data.id+"'></td>"
				+ "<td>"
				+ data.username
				+ "</td>"
				+ "<td>"
				+ data.operation
				+ "</td>"
				+ "<td>"
				+ data.method
				+ "</td>"
				+ "<td>"
				+ data.params
				+ "</td>"
				+ "<td>"
				+ data.ip
				+ "</td>"
				+ "<td>"
				+ data.time + "</td>";
		return tds;
	}

	$(".input-group-btn").on("click", ".btn-delete", doDeleteObjects)
	function doDeleteObjects() {
		//1.获取选中的id值
		var ids = doGetCheckedIds();
		if (ids.length == 0) {
			alert("至少选择一个");
			return;
		}
		//2.发异步请求执行删除操作
		var url = "log/doDeleteObjects";
		var params = {
			"ids" : ids.toString()
		};
		console.log(params);
		$.post(url, params, function(result) {
			if (result.state == 1) {
				alert(result.message);
				doRefreshAfterDeleteOK();
			} else {
				alert(result.message);
			}
		});
	}
	function doGetCheckedIds() {
		//定义一个数组,用于存储选中的checkbox的id值
		var array = [];//new Array();
		//获取tbody中所有类型为checkbox的input元素
		$("#tbodyId input[type=checkbox]").
		//迭代这些元素，每发现一个元素都会执行如下回调函数
		each(function() {
			//假如此元素的checked属性的值为true
			if ($(this).prop("checked")) {
				//调用数组对象的push方法将选中对象的值存储到数组
				array.push($(this).val());
			}
		});
		return array;
	}
	
	$(".table-hover").on("click", "#checkAll", doChangeTBodyCheckBoxState)
	function doChangeTBodyCheckBoxState() {
		//1.获取当前点击对象的checked属性的值
		var flag = $(this).prop("checked");//true or false
		//2.将tbody中所有checkbox元素的值都修改为flag对应的值。
		//第一种方案
/* 		$("#tbodyId input[name='cItem']")
		.each(function(){
		        $(this).prop("checked",flag);
		});  */
		//第二种方案
		$("#tbodyId input[type='checkbox']").prop("checked", flag);
	}
	$("#tbodyId").on("click", "input[type=checkbox]", doChangeTHeadCheckBoxState)
	function doChangeTHeadCheckBoxState() {
		//1.设定默认状态值
		var flag = true;
		//2.迭代所有tbody中的checkbox值并进行与操作
		$("#tbodyId input[type='checkbox']").each(function() {
			flag = flag & $(this).prop("checked")
		});
		//3.修改全选元素checkbox的值为flag
		$("#checkAll").prop("checked", flag);
	}
	//删除成功以后做刷新
	function doRefreshAfterDeleteOK() {
		var pageCount = $("#pageId").data("pageCount");
		var pageCurrent = $("#pageId").data("pageCurrent");
		var checked = $("#checkAll").prop("checked");
		if (pageCurrent == pageCount && checked && pageCurrent > 1) {
			pageCurrent--;
			$("#pageId").data("pageCurrent", pageCurrent);
		}
		doGetObjects();
	}
</script>






